<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2023-03-24 09:52:55
 * @LastEditors: Andy
 * @LastEditTime: 2023-03-30 15:22:00
-->
<template>
  <x-tab :title="'我的资料'" :isShowExpand="false">
    <div class="flex-column">
      <div class="user-info flex-row">
        <div class="left-panel flex-row">
          <img src="../../../common/assets/images/company.png" alt="" class="company-icon" />
          <div class="company-detail">
            <div class="company-name" @click="handleEditInfo"
              >{{ auditInfo?.fullName }} <em class="el-icon-caret-right"></em
            ></div>
            <div class="company-register-data">注册日期：{{ auditInfo?.birthTime.split(' ')[0] }}</div>
            <div class="company-state-level">
              <label
                >状态：
                <el-tag :color="getStateType(auditInfo?.supplierState)" effect="dark" :hit="false" :size="'mini'">
                  {{ selectDictLabel(dictOptions['srm_supplier_info.supplier_state'], auditInfo?.supplierState) }}
                </el-tag>
              </label>
              <label
                >等级：
                <el-tag :color="getLevelType(auditInfo?.supplierRank)" effect="dark" :hit="false" :size="'mini'">
                  {{ auditInfo?.supplierRank ?? '-' }}
                </el-tag>
              </label>
            </div>
          </div>
        </div>
        <div class="right-panel flex-row">
          <em class="line"></em>
          <div class="flex-column" style="padding-left: 20px">
            <span>已合作</span>
            <label
              ><span class="big-font">{{ auditInfo?.joinDays }}</span
              >天</label
            >
          </div>
        </div>
      </div>
      <div class="accruing-amounts flex-column">
        <div class="amounts-item">
          <span>累计销售额</span>
          <label
            ><span class="big-number">{{ supplierCount?.salesVolume }}</span
            >元</label
          >
        </div>
        <div class="amounts-item">
          <span>累计订单数</span>
          <label
            ><span class="big-number">{{ supplierCount?.orderNum }}</span
            >单</label
          >
        </div>
        <div class="amounts-item">
          <span>月均订单数</span>
          <label
            ><span class="big-number">{{ supplierCount?.monthlyOrderNum }}</span
            >单</label
          >
        </div>
      </div>
    </div>
  </x-tab>
</template>
<script>
  import { mapState } from 'pinia'
  import { selectDictLabel } from '@package/utils'
  import { pinias } from '@/common/pinia'
  import { apiGetSupplierTotal } from '../api'

  const { login } = pinias
  export default {
    name: 'MyCenter',
    props: {
      dictOptions: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        supplierCount: {
          salesVolume: 10000,
          orderNum: 2000,
          monthlyOrderNum: 100
        }
      }
    },
    computed: {
      ...mapState(login, ['auditInfo']),
      getStateType() {
        return (val) => {
          let type = ''
          if (`${val}` === '3') {
            type = '#0BBD5D'
          } else if (`${val}` === '1') {
            type = '#FF993C'
          } else {
            type = '#4474F6'
          }
          return type
        }
      },
      getLevelType() {
        return (val) => {
          let type = '#0BBD5D'
          if (val === 'B') {
            type = '#017EFA'
          } else if (val === 'C') {
            type = '#017EFA'
          } else if (val === 'D') {
            type = '#F55248'
          }
          return type
        }
      }
    },
    created() {
      this.getSupplierStatistics()
    },
    methods: {
      selectDictLabel,
      getSupplierStatistics() {
        apiGetSupplierTotal().then(({ data }) => {
          this.supplierCount = typeof data === 'object' ? data : this.supplierCount
        })
      },
      handleEditInfo() {
        this.$router.push({
          path: '/myEnterprise'
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '../style/home';
  ::v-deep .el-tag--mini {
    border-width: 0;
  }
</style>
